<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div id="myChart" :style="style"></div>
      </el-col>
       <el-col :span="12">
        <div id="myChart1" :style="{width:'100%',height:'340px'}"></div>
      </el-col>
      <el-col :span="24">
        <div id="myChart2" :style="{width:'100%',marginTop:'20px',height:'500px'}"></div>
      </el-col>
      <el-col :span="24">
        <div id="myChart3" :style="{width:'100%',marginTop:'20px',height:'500px'}"></div>
      </el-col>
      <el-col :span="24">
        <div id="myChart4" :style="{width:'100%',marginTop:'20px',height:'500px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts';
import {option,negative,custom,simple,multiple} from '../assets/js/echarts.js'
  export default{
    mounted(){
      this.getWH();
      let m = echarts.init(document.getElementById('myChart'));
      m.setOption(this.option);
      let m1 = echarts.init(document.getElementById('myChart1'));
      m1.setOption(this.negative);
      let m2 = echarts.init(document.getElementById('myChart2'));
      m2.setOption(this.custom);
      let m3 = echarts.init(document.getElementById('myChart3'));
      m3.setOption(this.simple);
      let m4 = echarts.init(document.getElementById('myChart4'));
      m4.setOption(this.multiple);
    },
    methods:{
      getWH(){
        let wh=window.innerHeight;
        let ww=window.innerWidth;
        // this.style={
        //   width:ww+"px",
        //   height:wh+"px"
        // }
      }
    },
    data(){
      return {
        style:{
          width:"100%",
          height:"340px"
        },
        option:option,
        negative:negative,
        custom:custom,
        simple:simple,
        multiple:multiple
      }
    }
  }
</script>
